<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>图书管理系统</title>
    <div th:replace="./include/home-head-include"></div>
</head>

<body>

<div class="container">
    <div th:replace="./include/home-nav-include"></div>
    <div th:replace="./include/home-banner-include"></div>
    <div class="row">
        <div class="col">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">书名</th>
                    <th scope="col">作者</th>
                    <th scope="col">封皮</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="book,start:${books}">
                    <th scope="row" th:text="${start.index+1}"></th>
                    <td><a th:href="@{'/detail?bookId='+${book.bookId}}" th:text="${book.bookname}"></a></td>
                    <td th:text="${book.author}"></td>
                    <td><img height="100px" th:src="${book.image}" alt=""></td>
                    <td>
                        <a href="javascript:void(0)" th:if="${session.username}!=null" class="borrowButton"
                           th:bookId="${book.bookId}">借阅</a>
                        <a class="flex-sm-fill text-sm-center nav-link" th:if="${session.username}==null"
                           th:href="@{/login}">登录</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>


<script>

    $(".borrowButton").click(function () {
        var bookId = $(this).attr("bookId");
        console.log(bookId);
        $.ajax({
            url: "/borrows",
            method: "post",
            data: {
                "bookId": bookId
            }, success: function (e) {
                console.log(e);
                if (e.code === 200) {
                    alert("借阅成功，前往借阅列表查看");
                } else {
                    alert(e.message);
                }
            }
        })
    })

    $(function () {
        var welcomeStr = $('#welcome').text();

        now = new Date(), hour = now.getHours()
        if (hour < 6) {
            $('#welcome').text(welcomeStr + ",凌晨好！")
        } else if (hour < 9) {
            $('#welcome').text(welcomeStr + ",早上好！")
        } else if (hour < 12) {
            $('#welcome').text(welcomeStr + ",上午好！")
        } else if (hour < 14) {
            $('#welcome').text(welcomeStr + ",中午好！")
        } else if (hour < 17) {
            $('#welcome').text(welcomeStr + ",下午好！")
        } else if (hour < 19) {
            $('#welcome').text(welcomeStr + ",傍晚好！")
        } else if (hour < 22) {
            $('#welcome').text(welcomeStr + ",晚上好！")
        } else {
            $('#welcome').text(welcomeStr + ",夜里好！")
        }
    });
</script>

</body>
</html>